/* 确保 Tailwind components 层已初始化 */
@tailwind components;

/* reco 主题自定义的组件类 */
@layer components {
  .text-basic {
    @apply text-reco-text-lightmode;
    @apply dark:text-reco-text-darkmode;
  }
  .text-lighter {
    @apply text-reco-text-lightmode-lighter;
    @apply dark:text-reco-text-darkmode-lighter;
  }
  .text-heavier {
    @apply text-reco-text-lightmode-heavier;
    @apply dark:text-reco-text-darkmode-heavier;
  }
}

@layer components {
  .border-basic {
    @apply border border-solid border-reco-border-lightmode;
    @apply dark:border-reco-border-darkmode;
  }
  .border-basic-top {
    @apply border-basic border-0 border-t;
  }
  .border-basic-bottom {
    @apply border-basic border-0 border-b;
  }
  .border-basic-left {
    @apply border-basic border-0 border-l;
  }
  .border-basic-right {
    @apply border-basic border-0 border-r;
  }
  .border-primary {
    @apply border-basic border-reco-primary;
    @apply dark:border-reco-primary;
  }
  .border-block {
    @apply border-basic rounded-lg;
  }
  .border-block-primary {
    @apply border-primary rounded-lg;
  }
}

@layer components {
  .bg-basic {
    @apply text-basic bg-reco-bg-lightmode;
    @apply dark:bg-reco-bg-darkmode;
  }
  .bg-block {
    @apply text-basic bg-reco-bg-lightmode-code;
    @apply dark:bg-reco-bg-darkmode-code;
  }
  .bg-active {
    @apply text-basic bg-reco-bg-lightmode-active;
    @apply dark:bg-reco-bg-darkmode-active;
  }
}
